<template>
  <div class="team-item flex">
    <div class="info">
      <h2>{{detail?.name}}</h2>
      <h3>{{detail?.position}}</h3>
      <p>
        <img src="/src/assets/images/border/top4.png" class="border-top" alt="">
        {{detail?.desc}}
      </p>
    </div>
    <div class="team-img">
      <div class="img-show" :style="`background-image: url(${detail?.src})`" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'
const props = defineProps({detail: {type: Object}})

</script>

<style lang='scss' scoped>
.team-item {
  margin-bottom: 48px;
  border-bottom: 2px solid #36CDFD;
}
h2 {
  font-size: 20px;
  color: #36CDFD;
}
h3 {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  background: linear-gradient(180deg, #36CDFD 0%, rgba(54,205,253,0.2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
p {
  color: #D9D9D9;
  font-size: 16px;
  padding-top: 12px;
  position: relative;
  padding-right: 22px;

  .border-top {
    top: -4px;
    left: 0;
    height: 4px;
    position: absolute;
  }
  &:before {
    top: 0;
    width: 100%;
    content: '';
    position: absolute;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(54, 205, 253, 1), rgba(54, 205, 253, 0)) 1 1;
  }
}
.team-img {
  width: 200px;
  position: relative;
  &:before, &:after {
    content: '';
    width: 140px;
    bottom: 0;
    right: 0;
    height: 180px;
    position: absolute;
    background: linear-gradient(#185ECA, #ffffff00);
    transform: skewX(-12deg);
  }
  &:before {
    width: 26px;
    height: 32px;
    right: 4px;
  }
  .img-show {
    width: 160px;
    height: 220px;
    margin-right: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff30;
  }

}

</style>